<template>
  <div class="taskdetail">
    <div class="detail-top">
      <div class="detial-text">
        <div class="detial-title">
          <div class="title-top">
            <div class="title">{{ detaildata.name }}</div>
            <div class="tabs">
              <div class="tab">{{ detaildata.industryName }}</div>
              <div class="tab">{{ detaildata.institutionType }}</div>
            </div>
          </div>
          <div class="title-bottom">
            <div class="bottom-item">
              <div class="item-title">详细地址：</div>
              <div class="item-content">{{ detaildata.registerAddress }}</div>
            </div>
            <!-- <div class="bottom-item" v-if="pageType == 'check'">
              <div class="item-title">检查单位：</div>
              <div class="item-content">{{ detaildata.policeStationName }}</div>
            </div> -->
            <div class="bottom-item">
              <div class="item-title">来源：</div>
              <div class="item-content">{{ detaildata.taskSourceName }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="detail-img" v-if="pageType == 'check'">
        <img
          src="@/assets/images/inprogress.png"
          alt=""
          v-if="detaildata.checkStatus == 1"
        />
        <img
          src="@/assets/images/finishprogress.png"
          alt=""
          v-if="detaildata.checkStatus == 2"
        />
        <img
          src="@/assets/images/noprogress.png"
          alt=""
          v-if="detaildata.checkStatus == 0"
        />
      </div>
      <div class="detail-img" v-if="pageType == 'task'">
        <img
          src="@/assets/images/Checked.png"
          alt=""
          v-if="detaildata.taskStatus == 1"
        />
        <img
          src="@/assets/images/incheck.png"
          alt=""
          v-if="detaildata.taskStatus == 0"
        />
      </div>
      <div class="detail-img" v-if="pageType == 'danger'">
        <img
          src="@/assets/images/finishprogress.png"
          alt=""
          v-if="detaildata.checkStatus == 2"
        />
        <img
          src="@/assets/images/unfinishprogress.png"
          alt=""
          v-if="detaildata.checkStatus == 1"
        />
      </div>
    </div>
    <div class="detail-bottom" v-if="detaildata.taskSource != 3">
      <div class="top">
        <div class="top-title">下发时间：</div>
        <div>{{ detaildata.createTime }}</div>
      </div>
      <div class="top">
        <div class="top-title">截止时间：</div>
        <div>{{ detaildata.lastDate }}</div>
      </div>
      <div class="top">
        <div class="top-title">情况说明：</div>
        <div>{{ detaildata.remark }}</div>
      </div>
    </div>

    <div class="check-detail">
      <div class="middle-top">
        <div class="middle-title">
          <img src="@/assets/images/title-icon.png" alt="" />
          检查详情
        </div>
      </div>
      <div class="check-content">
        <div class="content-left">
          <div class="item">
            <div class="title">检查人：</div>
            <div class="text">{{ detaildata.checkName || "--" }}</div>
          </div>
          <div class="item">
            <div class="title">检查单位：</div>
            <div class="text">{{ detaildata.checkUnitName || "--" }}</div>
          </div>
          <div class="item">
            <div class="title">检查时间：</div>
            <div class="text">{{ detaildata.checkDate || "--" }}</div>
          </div>
        </div>
        <div class="content-right">
          <div class="item">
            <div class="item-content">
              <img
                src="@/assets/images/checkicon.png"
                alt=""
                style="width: 20px; height: 20px"
              />
              <div>
                检查事项 <span>{{ detaildata.allStandard || 0 }}</span> 项
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item-content">
              <img
                src="@/assets/images/qualified.png"
                alt=""
                style="width: 20px; height: 20px"
              />
              <div>
                达标 <span>{{ detaildata.standard || 0 }}</span> 项
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item-content">
              <img
                src="@/assets/images/unqualified.png"
                alt=""
                style="width: 20px; height: 20px"
              />
              <div>
                不达标 <span>{{ detaildata.notStandard || 0 }}</span> 项
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="content-detaillist">
        <div class="detaillist-title">检查明细</div>
        <el-table
          v-loading="loading"
          :data="questionAnswerList"
          border
          :header-cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column
            type="index"
            width="80"
            label="序号"
            align="center"
          />
          <el-table-column
            label="检查项"
            prop="questionLabel"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            label="检查结果"
            prop="standardOrNot"
            width="200"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              <div
                style="color: #09e18c"
                class="row-style"
                v-if="row.standardOrNot == 0"
              >
                <img
                  src="@/assets/images/qualified.png"
                  alt=""
                  style="width: 20px; height: 20px"
                />
                达标
              </div>
              <div
                style="color: #ff2c16; cursor: pointer"
                v-if="row.standardOrNot == 1"
              >
                <div class="row-style">
                  <img
                    src="@/assets/images/unqualified.png"
                    alt=""
                    style="width: 20px; height: 20px"
                  />
                  <span @click="handlerquestion($event, row)">未达标</span>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div
          v-if="showPopup"
          :class="{ popup: true }"
          :style="{ left: popupX + 'px', top: popupY + 'px' }"
        >
          <div class="triangle"></div>
          <div class="close" @click="closepopup">x</div>
          <div class="problems">
            <div class="title">存在的问题及其情况</div>
            <div class="text">
              {{ qusitiontext }}
            </div>
          </div>
          <div class="Subitem">
            <div class="title">检查子项</div>
            <el-checkbox-group
              v-model="lackItemList"
              disabled
              v-if="questionDetailList.length > 0"
            >
              <el-checkbox
                v-for="(jtem, i) in questionDetailList"
                :key="i"
                :label="String(jtem.questionDetailId)"
              >
                {{ jtem.questionDetailLabel }}
              </el-checkbox>
            </el-checkbox-group>
            <div class="Subitem-empty" v-else>没有检查子项</div>
          </div>
        </div>
      </div>
      <div class="content-evidence">
        <div class="evidence-title">检查纪实</div>
        <div class="evidence-text">{{ evidencetext }}</div>
      </div>
      <div class="content-pics">
        <div class="pics-title">现场照片</div>
        <div class="upload-pics">
          <div class="pic" v-for="(item, index) in picList" :key="index">
            <el-image
              :preview-teleported="true"
              :src="item.url"
              :preview-src-list="showImg(item.url)"
            >
            </el-image>
          </div>
        </div>
      </div>
      <div class="middle-top">
        <div class="middle-title">
          <img src="@/assets/images/title-icon.png" alt="" />
          处置日志
        </div>
      </div>
      <div class="content-disposition">
        <div
          class="disposition-item"
          v-for="(ctem, index) in detaildata.disposalFollowLogsVOS"
          :key="index"
        >
          <div class="disposition-index">
            <span class="index">{{
              (index < 9 ? "0" : "") + (index + 1)
            }}</span>
          </div>
          <div class="disposition-content">
            <div class="content-top">
              <div class="top-item">{{ ctem.title }}</div>
              <div class="top-item">
                <div class="item-name">{{ ctem.nickName }}</div>
                <div
                  class="item-opteate"
                  :style="getFontColorStyle(ctem.operationTypeName)"
                >
                  {{ ctem.operationTypeName }}
                </div>
              </div>
              <div class="item-time">{{ ctem.createTime }}</div>
            </div>
            <div class="content-bottom">
              {{ ctem.content }}
            </div>
            <div class="content-pics" v-if="ctem.fileList">
              <div
                class="img"
                v-for="(gtem, index) in ctem.fileList"
                :key="index"
              >
                <el-image
                  :preview-teleported="true"
                  :src="gtem.url"
                  :preview-src-list="showImg(gtem.url)"
                  style="width: 100%; height: 80px"
                >
                </el-image>
                <!-- <img
                  src="@/assets/images/profile.jpg"
                  alt=""
                  style="width: 100%; height: 80px"
                /> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { gettaskdetail } from "@/api/task/task";
import { getquestion } from "@/api/check/check";

const props = defineProps({
  // 操作类型
  pageType: {
    type: String,
    default: "",
  },
});

console.log("props", props.pageType);
let detaildata = ref({});

let questionAnswerList = ref([{}]);
// 表格加载效果
const loading = ref(false);
let picList = ref([{}]);

let showPopup = ref(false);
let popupX = ref(0);
let popupY = ref(0);

let lackItemList = ref([]);
let questionDetailList = ref([]);
let evidencetext = ref("");
let qusitiontext = ref("");

const getFontColorStyle = (operationTypeName) => {
  // 根据 operationTypeName 返回不同的颜色样式
  switch (operationTypeName) {
    case "办理":
      return { color: "#44cd7b" };
    case "转派":
      return { color: "#909399" };
    case "上报":
      return { color: "#626aef" };
    case "复核":
      return { color: "#eebe77" };
    case "#f56c6c":
      return { color: "#626aef" };
    default:
      return {};
  }
};
/**
 * @description: 处理详情信息
 * @param {Number} id
 */
const handleDetailInfo = (row) => {
  gettaskdetail(row.taskId).then((res) => {
    detaildata.value = res.data;
    console.log("detaildata.value", detaildata.value);
    questionAnswerList.value = res.data.questionAnswerList;
    if (res.data.checkContent) {
      evidencetext.value = res.data.checkContent;
    } else {
      evidencetext.value = "暂无检查纪实";
    }
    picList.value = res.data.fileList;
  });
};
const showImg = (img) => {
  let imgArr = [];
  imgArr.push(img);
  return imgArr;
};

/**
 * @description: 处理不达标弹窗
 */
const handlerquestion = (event, row) => {
  getquestion(row.questionId).then((res) => {
    if (res.code == 200) {
      questionDetailList.value = res.data.questionDetailList;
      qusitiontext.value = row.description;
      lackItemList.value = row.lackItemList;
      showPopup.value = true;
      const targetRect = document
        .querySelector(".content-detaillist")
        .getBoundingClientRect();
      popupX.value = event.clientX - targetRect.left - 600;
      popupY.value = event.clientY - targetRect.top - 80;
    }
  });
};
/**
 * @description: 关闭弹窗
 */
const closepopup = () => {
  showPopup.value = false;
};

defineExpose({
  handleDetailInfo,
});
</script>

<style scoped lang="scss">
.taskdetail {
  padding: 20px 50px;
  height: 670px;
  overflow-y: scroll;
  .detail-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .detial-text {
      display: flex;

      .detial-title {
        display: flex;
        flex-direction: column;
        .title-top {
          display: flex;
          align-items: center;
          margin-bottom: 25px;
          .title {
            font-size: 16px;
            color: #000000;
            margin-right: 50px;
          }
          .tabs {
            display: flex;
            .tab {
              padding: 5px 10px;
              color: #ffffff;
              margin-right: 10px;
            }
            .tab:nth-child(1) {
              background-color: #088ef8;
            }
            .tab:nth-child(2) {
              background-color: #e2a802;
            }
          }
        }
        .title-bottom {
          display: flex;
          justify-content: space-between;
          width: 700px;
          .bottom-item {
            display: flex;
          }
        }
      }
    }
  }
  .detail-bottom {
    display: flex;
    background-color: #ebf2ff;
    flex-wrap: wrap;
    .top {
      display: flex;
      width: 40%;
      margin-top: 20px;
      align-items: baseline;
      .top-title {
        flex-shrink: 0;
      }
    }
    .top:last-child {
      width: 90%;
      margin-bottom: 20px;
    }
  }
  .check-detail {
    .middle-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 0;
      .middle-title {
        font-size: 16px;
      }
    }
    .check-content {
      display: flex;
      justify-content: space-between;
      .content-left {
        padding: 10px 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .item {
          display: flex;
        }
      }
    }
    .content-detaillist {
      position: relative;
      margin-top: 60px;
      .detaillist-title {
        padding: 20px 0;
        color: #000000;
      }
      .row-style {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60px;
        transform: translateX(60px);
      }
      .popup {
        position: absolute;
        background-color: white;
        border: 1px solid black;
        padding: 10px;
        z-index: 1000;
        width: 500px;
        height: 161px;
        .close {
          text-align: right;
          font-size: 18px;
          cursor: pointer;
        }
        .title {
          font-size: 14px;
          color: #000000;
          font-weight: 600;
        }
        .text {
          text-indent: 2em;
        }
        .triangle {
          position: absolute;
          right: -9px;
          top: 0;
          bottom: 0;
          margin: auto 0;
          width: 0;
          height: 0;
          border-left: 5px solid transparent;
          border-right: 5px solid transparent;
          border-bottom: 7.5px solid #404040; /* 边长为100px时，高度为边长的正弦值乘以2/3 */
          transform: rotate(90deg);
        }
      }
    }
    .content-evidence {
      .evidence-title {
        padding: 20px 0;
        color: #000000;
      }
      .evidence-text {
        padding: 20px;
        background-color: #eaf1ff;
      }
    }
    .content-pics {
      .pics-title {
        padding: 20px 0;
        color: #000000;
      }
      .upload-pics {
        display: flex;
        .pic {
          position: relative;
          width: 160px;
          height: 100px;
          display: flex;
          justify-content: center;
          margin-right: 10px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .content-disposition {
      width: 70%;
      border-left: 2px solid #949bb5;
      .disposition-item {
        display: flex;
        background-color: #f6f8fe;
        padding: 10px 5px 10px 20px;
        margin-bottom: 20px;
        border-left: 4px solid #546dff;
        transform: translateX(-2px);
        .disposition-index {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 50px;
          height: 40px;
          margin-right: 20px;
          background: url("@/assets/images/index-icon.png") no-repeat;
          background-size: 100% 100%;
          font-weight: bold;
          font-size: 24px;
          color: #ffffff;
          flex-shrink: 0;
          .index {
            transform: translateX(5px);
          }
        }
        .disposition-content {
          width: 100%;
          .content-top {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            .top-item {
              display: flex;
              font-weight: bold;
              font-size: 14px;
              color: #333333;
              .item-name {
                margin-right: 20px;
              }
            }
            .item-time {
              font-size: 14px;
              color: #858586;
            }
          }

          .content-bottom {
            background: #eff0f7;
            padding: 10px;
            font-weight: 500;
            font-size: 14px;
            color: #999999;
          }
          .content-pics {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            margin-top: 10px;
            .img {
              width: 24%;
            }
          }
        }
      }
    }
    .content-right {
      display: flex;
      flex-wrap: wrap;
      width: 70%;
      .item {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60px;
        .item-content {
          display: flex;
          align-items: center;
          img {
            margin-right: 10px;
            transform: translateY(3px);
          }
          span {
            font-size: 24px;
            font-weight: 700;
          }
        }
      }
      .item:nth-child(1) {
        width: 100%;
        background-color: #ebf2ff;
        margin-bottom: 2%;
        span {
          color: #4ea3f2;
        }
      }
      .item:nth-child(2) {
        width: 50%;
        background-color: #e6fcf3;
        margin-right: 2%;
        span {
          color: #2ccc92;
        }
      }
      .item:nth-child(3) {
        width: 48%;
        background-color: #ffe9e8;
        span {
          color: #e3493c;
        }
      }
    }
  }
}
</style>
